<template>
    <dl class="detail-type">
        <dt @click="isShow = !isShow">
            <span class="tit">附件管理</span>
            <el-button v-if="edit" type="primary" size="mini" @click.stop="choiceCus()" :disabled="loading">上传附件
            </el-button>
        </dt>
        <el-collapse-transition>
            <dd v-show="isShow" v-loading="loading">
                <el-table border v-loading="loading" :data="tableList" ref="tableList" v-tableHeight
                    :height="tableList&&tableList.length > 0 ? '600px' : '120px'">
                    <el-table-column label="附件名称" align="center" prop="name" />
                    <el-table-column label="上传时间" align="center" prop="add_time" />
                    <el-table-column label="附件格式" align="center" prop="suffix" />
                    <el-table-column label="附件大小" align="center" prop="size" />
                    <!-- <el-table-column label="上传人员" align="center" prop="detailed" /> -->
                    <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
                        <template slot-scope="scope">
                            <el-button v-if="scope.row.suffix&&scope.row.suffix.includes('image')" size="mini" type="text" icon="el-icon-right"
                                @click="downloadF(scope.row)" v-hasPermi="['customer:grade:del']">查看
                            </el-button>
                            <el-button v-else-if="scope.row.suffix&&scope.row.suffix.includes('video')" size="mini" type="text" icon="el-icon-right"
                                @click="openVideo(scope.row.path)" v-hasPermi="['customer:grade:del']">查看
                            </el-button>
                            <!-- openVideo -->
                            <el-button v-else size="mini" type="text" icon="el-icon-download" @click="downloadF(scope.row)"
                                v-hasPermi="['customer:grade:del']">下载
                            </el-button>
                            <el-button size="mini" type="text" icon="el-icon-delete" @click="handleDelete(scope.row,scope.$index)"
                                v-hasPermi="['customer:grade:del']">
                                删除</el-button>
                        </template>
                    </el-table-column>
                </el-table>
                <el-dialog :modal-append-to-body="false" title="上传附件" visible v-if="detailShow == 'choice'" @close="close()" width="500px" append-to-body
                    :close-on-click-modal="false">
                    <el-form ref="form" :model="form" :rules="rules" label-width="80px" v-loading="formLoading">
                        <el-row>
                            <el-col :span="24" class="form-style">
                                <el-form-item label="上传文件" prop="file_url">
                                    <el-upload class="upload-demo" ref="upload" :multiple="false"
                                        :action="$uploadUrl" :on-change="handleChange"
                                        :on-remove="handleRemove" :on-preview="handlePreview" :file-list="fileList" :auto-upload="false" :limit="2">
                                        <el-button slot="trigger" size="small" type="primary">上传文件</el-button>
                                    </el-upload>
                                </el-form-item>
                            </el-col>
                        </el-row>
                    </el-form>
                    <span slot="footer" class="dialog-footer">
                        <el-button @click="close()">取 消</el-button>
                        <el-button type="primary" @click="submit" :disabled="formLoading">确 定</el-button>
                    </span>
                </el-dialog>
            </dd>
        </el-collapse-transition>
    </dl>
</template>
<script>
import { uploadImg } from "@/api/common.js"
export default {
    name: '',
    props: {
        handleShow: {
            type: String, //add新增edit编辑
            default: ""
        },
        data: {
            type: Object,
            default: function () {
                return {}
            }
        }
    },
    components: {

    },
    data() {
        var checkFile = (rule, value, callback) => {
            if (this.fileList.length == 0) {
                callback(new Error('请上传文件'));
            } else {
                callback();
            }
        };
        return {
            loading: false,
            isShow: true,
            diaLoading: false,
            detailShow: '',
            pageCount: 0,
            queryParams: {
                page: 1,
                limit: 10,
                key_name: ""
            },
            tableList: [],
            size: 'mini',
            form: {
                file_url: null,
            },
            rules: {
                file_url: [{ required: true, validator: checkFile, trigger: 'change' }],
            },
            formLoading: false,
            fileList: [
            ],
            edit: this.handleShow == "detail" ? false : true,
            file: null,
            subForm: {
                append_data: "",
            }
        }
    },
    created() {
        if (this.handleShow == "edit" || this.handleShow == "detail") {
            this.tableList = this.data.append_data && this.data.append_data.length > 0 ? this.data.append_data : []
        }
    },
    methods: {
        choiceCus() {
            this.detailShow = 'choice'
        },
        getList() {
            this.diaLoading = true;

        },
        close() {
            this.form = {}
            this.fileList = []
            this.detailShow = ''
        },
        handleChange(file, fileList) {
            this.formLoading = true
            this.file = file
            if (fileList.length > 1) {
                fileList.splice(0, 1);
            }
            this.fileList = fileList;
            let formData = new FormData()
            formData.append("file", this.fileList[0].raw)
            uploadImg(formData).then(res => {
                // console.log(res.data[0].fileurl, 222)
                this.form.file_url = res.data[0].fileurl
                this.formLoading = false
            }).catch(error => {
                this.formLoading = false
            })
        },
        handleRemove(file, fileList) {
            this.fileList = fileList;
        },
        handlePreview(file) {
            // let URL = window.URL || window.webkitURL
            window.open(this.form.file_url)
        },
        downloadF(row) {
            // console.log(row)
            // let obj = {}
            // obj = {
            //     url: row.fileurl,
            //     name: row.name
            // }
            // return obj
            let link = document.createElement("a"); //创建a标签
            link.style.display = "none"; //使其隐藏
            link.href = row.path; //赋予文件下载地址
            link.target = "_blank"
            link.setAttribute("download", row.name); //设置下载属性 以及文件名
            document.body.appendChild(link); //a标签插至页面中
            link.click(); //强制触发a标签事件
        },
        openVideo(src) {
            var page = window.open();
            var newHtml = "<body style=''background: black>" +
                "<div style='width: 80 %; margin: auto'>" +
                "<video controls width='100%' autoplay src='" + src + "'></video>" +
                "</div>" +
                "</body>";
            page.document.write(newHtml);
        },
        handleDelete(row, index) {
            this.$confirm('是否确认删除' + '"' + row.name + '"' + '?', "警告", {
                confirmButtonText: "确定",
                cancelButtonText: "取消",
                type: "warning"
            }).then(() => {
                this.tableList.splice(index, 1)
                this.subForm.append_data = this.tableList.length > 0 ? JSON.stringify(this.tableList) : null
                this.msgSuccess("当前列表删除成功");
            })
        },
        submit() {
            this.$refs.form.validate((valid) => {
                if (valid) {
                    if (this.form.file_url) {
                        this.tableList.push({
                            name: this.file.name,
                            suffix: this.file.raw.type,
                            path: this.form.file_url,
                            size: (this.file.size / 1024 / 1024).toFixed(2) + "M",
                            add_time: this.$moment().format("YYYY-MM-DD HH:mm:ss"),
                        })
                        this.subForm.append_data = this.tableList.length > 0 ? JSON.stringify(this.tableList) : null
                    }
                    this.close()
                }
            })
        }
    },
}

</script>
<style scoped lang='scss'>
/deep/.el-upload-list {
    display: flex;
    flex-wrap: wrap;

    .el-upload-list__item {
        width: auto;
        margin-top: 10px;
    }
}
/deep/.el-upload {
    border: 0;
    width: 80px;
}

/deep/.el-upload--text {
    height: 30px;
}
/deep/.form-style span {
    color: #ffffff;
}
</style>